<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { userSignApi, userLoginApi } from "@/api/login";

import { useRouter } from "vue-router";

import useFormProperties from "@/composables/login/useFormProperties";
import useFormOperates from "@/composables/login/useFormOperates";

const { t } = useI18n();
const router = useRouter(); //路由

const { ruleForm, loginText, ruleFormRef, activeName } = useFormProperties(t);
const { userSign, userLogin } = useFormOperates(router, ruleForm);

// * 切换按钮的文本
function handleClick(e: any) {
  let { name, label } = e.props;
  // if (name === "login") {
  //   loginText.value = t("login.loginBtn");
  // } else {
  //   loginText.value = t("login.signBtn");
  // }
  loginText.value = t(`login.${name}Btn`);
}

// TODO: 表单提交事件
function submitForm() {
  ruleFormRef.value.validate((valid: any) => {
    if (valid) {
      if (activeName.value === "sign") {
        userSign(ruleForm);
      } else if (activeName.value === "login") {
        userLogin(ruleForm);
      }
    } else {
      return false;
    }
  });
}
</script>

<template>
  <div class="login-page">
    <!-- 图片背景区域 -->
    <div class="left-part"></div>
    <!-- tabs 切换登录注册 -->
    <div class="right-part">
      <div class="login-panel">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="t('login.loginTab')" name="login"></el-tab-pane>
          <el-tab-pane :label="t('login.signTab')" name="sign"></el-tab-pane>
        </el-tabs>
        <!-- 表单组件 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <!-- 手机号 -->
          <el-form-item prop="mobile">
            <el-input
              :placeholder="t('login.placeMobile')"
              v-model="ruleForm.mobile"
            />
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              :placeholder="t('login.placePass')"
              v-model="ruleForm.password"
              type="password"
            />
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="submitForm">
              {{ loginText }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "@/assets/scss/login/index.scss";
</style>
